<template>
  <div class="container">
    <!-- <van-nav-bar :border="false"
                 title="密码登录"
                 left-arrow
                 @click-left="$router.back()" /> -->
    <Navbar title="密码登录"></Navbar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="formData.username"
        name="账号"
        placeholder="账号"
        :rules="[
          {
            validator: verifyUsername,
            message: '请输入正确手机号',
            required: true,
            trigger: 'onBlur',
          },
        ]"
      />
      <van-field
        v-model="formData.password"
        :type="test"
        name="密码"
        placeholder="密码"
        :rules="[
          {
            validator: verifyPassword,
            required: true,
            message: '密码必须以字母开头，且6-18位',
            trigger: 'onBlur',
          },
        ]"
      >
        <template #button>
          <van-switch v-model="checked" inactive-color="#dcdee0" size="20px" />
        </template>
      </van-field>
      <van-field
        v-model="formData.captcha_code"
        type="number"
        name="验证码"
        placeholder="验证码"
        :rules="[
          {
            validator: verifyCode,
            required: true,
            message: '请填写正确验证码',
            trigger: 'onBlur',
          },
        ]"
      >
        <template #extra>
          <div id="updateCode">
            <img :src="Img" alt="验证码" />
            <a href="#" @click="getCode">
              <span>看不清</span>
              <span>换一张</span>
            </a>
          </div>
        </template>
      </van-field>
      <div class="text">
        <p>温馨提示：未注册过的账号，登录时将自动注册</p>
        <p>注册过的用户可凭账号密码登录</p>
      </div>
      <div style="margin: 16px">
        <van-button block type="primary" native-type="submit">登录</van-button>
      </div>
    </van-form>
    <div class="resetpass">
      <a href="#" @click="$router.push('/forget')">重置密码？</a>
    </div>
  </div>
</template>

<script>
import { getCode, login } from '@/api/login'
import axios from 'axios'
export default {
  name: 'login',
  data() {
    return {
      formData: {
        username: '',
        password: '',
        captcha_code: '',
      },

      checked: true,
      Img: '',
      userInfo: {},
    }
  },
  computed: {
    test() {
      return this.checked ? 'text' : 'password'
    },
  },
  created() {
    this.getCode()
  },
  methods: {
    async onSubmit() {
      const res = await login(this.formData)
      const city = await axios.get(
        'https://elm.cangdu.org/v1/cities?type=guess'
      )
      this.$store.commit('setcurrentAddress', city.data)
      this.userInfo = res.data
      //将用户信息存入VUEX
      this.$store.commit('setUserInfo', res.data)
      if (res.data.status === 0 && res.data.type === 'ERROR_CAPTCHA') {
        this.$toast('验证码错误')
        this.getCode()
        return
      }
      if (res.data.status === 0 && res.data.type === 'ERROR_PASSWORD') {
        this.$toast('密码不正确')
        this.getCode()
        return
      }
      this.$router.push('/')
    },
    //获取验证码
    async getCode() {
      const { data } = await getCode()
      this.Img = data.code
    },
    //验证账号
    verifyUsername(value) {
      return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(
        value
      )
    },
    //验证密码
    verifyPassword(value) {
      return /^[a-zA-Z]\w{5,17}$/.test(value)
    },
    //验证 验证码
    verifyCode(value) {
      return /^\d{4}$/.test(value)
    },
  },
}
</script>

<style lang='less' scoped>
.container {
  /*   /deep/ .van-nav-bar {
    background-color: #3190e8;
    margin-bottom: 10px;
    .van-icon {
      color: #fff;
    }
    .van-nav-bar__title {
      color: #fff;
      font-weight: 700;
      font-size: 19px;
    }
  } */
  .text {
    padding-left: 18px;
    p {
      font-size: 12px;
      color: #ff0000;
    }
  }
  .resetpass {
    display: flex;
    justify-content: end;
    padding-right: 12px;
    padding-top: 10px;
    a {
      color: #3e9fff;
    }
  }
  #updateCode {
    display: flex;
    a {
      color: #3e9fff;
      img {
        width: 180px;
        height: 80px;
      }
      span {
        display: block;
        font-size: 12px;
      }
    }
  }
}
</style>